<template>
  <div class="home">
    <pullup :ispullup="ispullup" />

    <!-- 头部 -->
    <div class="headercontent" v-lazy:background-image="headerImg">
      <div class="userinfo mt-5 p-5 ml-5">
        <h1 class="nickname fs-gxl">技术一哥</h1>
        <p class="motto fs-gsl ">
          没有什么可以让自己倒下，除了自己！
        </p>
      </div>
      <div class="slant-left"></div>
      <div class="slant-right"></div>
    </div>
    <!-- 内容区域 -->
    <main class="content " v-if="loadingContent">
      <row :gutter="60">
        <column :xs="12" :md="12" :lg="8">
          <div class="tip">
            <tip />
          </div>

          <div class="site mt-5">
            <titlerow title="近况" />
            <myarticle v-for="i in 4" :key="i" />
          </div>
        </column>

        <column :lg="4" :xs="12">
          <div class="labels mt-5">
            <panel title="标签栏">
              <mylabel text="字面量" :customstyle="{background:'#F9EBEA'}" />
              <mylabel text="变量" :customstyle="{background:'#F5EEF8'}" />
              <mylabel text="数据" :customstyle="{background:'#FEF9E7'}" />
              <mylabel text="可视化" :customstyle="{background:'#82E0AA'}" />
              <mylabel text="datav" :customstyle="{background:'#F8C471'}" />
            </panel>

            <panel title="分类" class="mt-5">
              <mylabel text="后端开发" :customstyle="{background:'#F9EBEA'}" />
              <mylabel text="前端开发" :customstyle="{background:'#F5EEF8'}" />
              <mylabel text="Node" :customstyle="{background:'#FEF9E7'}" />
              <mylabel text="Vue" :customstyle="{background:'#82E0AA'}" />
              <mylabel text="Uni-app" :customstyle="{background:'#F8C471'}" />
            </panel>
          </div>
        </column>
      </row>
    </main>

  </div>
</template>

<script>
import tip from '@/components/tip'
import pullup from '@/components/pullup'
import titlerow from '@/components/titlerow'
// import feature from '@/components/feature'
import myarticle from '@/components/article'
import panel from '@/components/panel'
import mylabel from '@/components/label'
export default {
  name: 'home',
  components: { tip, pullup, titlerow, myarticle, panel, mylabel },
  data () {
    return {
      feature1: require('@/assets/images/feature1.jpg'),
      feature2: require('@/assets/images/feature2.jpg'),
      feature3: require('@/assets/images/feature3.jpg'),

      featureStyle: {},

      loadingContent: false,

      headerImg: require('@/assets/images/background.jpg'),

      // 是否显示上拉
      ispullup: false,

      windowHeight: 0,

    }
  },
  mounted () {
    this.windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('scroll', this.loadContent)
    window.addEventListener('scroll', this.loadPullup, true)
  },
  methods: {
    loadContent () {
      if (this.loadingContent) {
        return window.removeEventListener('scroll', this.loadContent, false)
      }
      this.loadingContent = true
    },
    loadPullup () {
      let top = Math.floor(
        document.body.scrollTop ||
        document.documentElement.scrollTop ||
        window.pageYOffset
      )
      if (top > this.windowHeight) {
        this.ispullup = true
      } else {
        this.ispullup = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.headercontent {
  overflow: hidden;
  position: relative;
  height: 100vh;
  background-image: url(../assets/images/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  animation: fadeintransition 2s;

  .userinfo {
    margin: 10rem 6rem;
    .nickname,
    .motto {
      font-weight: normal;
      color: hsla(0, 0%, 100%, 0.6);
      animation: towardslefttransition 2s;
      transition: all 1s;
    }
    .nickname:hover,
    .motto:hover {
      color: #fff;
    }
  }

  .slant-left,
  .slant-right {
    background: #fff;
    width: 100%;
    position: absolute;
    bottom: -5rem;
    height: 12.5rem;
  }
  .slant-left {
    right: 48%;
    transform: rotate(6deg);
  }
  .slant-right {
    left: 48%;
    transform: rotate(-6deg);
  }
}

.content {
  .tip {
    margin: 2.5rem 0;
  }
}
</style>
